<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue待办事项列表</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <style>
    .container {
      max-width: 500px;
      margin: 2rem auto;
      padding: 0 1rem;
      font-family: sans-serif;
    }
    h1 {
      text-align: center;
      color: #333;
      margin-bottom: 1.5rem;
    }
    /* 添加待办区域 */
    .add-bar {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1rem;
    }
    .todo-input {
      flex: 1;
      padding: 0.6rem;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    .btn {
      padding: 0.6rem 1rem;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      color: white;
    }
    .btn-add {
      background-color: #42b983;
    }
    .btn-del-batch {
      background-color: #f56c6c;
      margin-bottom: 1rem;
    }
    .btn-edit {
      background-color: #409eff;
      margin-right: 0.3rem;
      padding: 0.3rem 0.6rem;
      font-size: 0.8rem;
    }
    /* 待办列表 */
    .todo-list {
      list-style: none;
      padding: 0;
    }
    .todo-item {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      padding: 0.8rem;
      margin-bottom: 0.5rem;
      border: 1px solid #eee;
    }
    .todo-check {
      width: 16px;
      height: 16px;
    }
    .todo-content {
      flex: 1;
      cursor: pointer;
    }
    .done {
      text-decoration: line-through;
      color: #999;
    }
    /* 状态标签 */
    .status-tag {
      padding: 0.2rem 0.5rem;
      border-radius: 12px;
      font-size: 0.7rem;
      color: white;
    }
    .status-done {
      background-color: #42b983;
    }
    .status-pending {
      background-color: #fbbf24;
    }
    /* 提示与统计 */
    .tip {
      color: #f56c6c;
      font-size: 0.8rem;
      margin: 0.3rem 0;
    }
    .stats {
      margin-top: 1rem;
      color: #666;
      font-size: 0.9rem;
    }
    /* 编辑框样式 */
    .edit-input {
      flex: 1;
      padding: 0.4rem;
      border: 1px solid #409eff;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="container" id="app">
    <h1>Vue待办列表</h1>
    
    <!-- 添加待办区域 -->
    <div class="add-bar">
      <input
        type="text"
        class="todo-input"
        placeholder="输入待办内容"
        v-model="newTodoText"
        @keyup.enter="addTodo"
      >
      <button class="btn btn-add" @click="addTodo">添加</button>
    </div>
    <div class="tip" v-text="addTip"></div>
    
    <!-- 批量删除按钮 -->
    <button 
      class="btn btn-del-batch" 
      @click="deleteBatch"
      v-show="selectedIds.length > 0"
    >
      批量删除（已选：{{ selectedIds.length }}）
    </button>
    
    <!-- 待办列表 -->
    <ul class="todo-list">
      <li class="todo-item" v-for="(todo, index) in todos" :key="todo.id">
        <!-- 批量选择复选框 -->
        <input 
          type="checkbox" 
          class="todo-check" 
          v-model="selectedIds"
          :value="todo.id"
        >
        
        <!-- 待办文本或编辑框 -->
        <span
          class="todo-content"
          :class="{ done: todo.isDone }"
          v-if="!todo.isEditing"
          @click="toggleDone(index)"
        >
          {{ todo.text }}
        </span>
        <input
          type="text"
          class="edit-input"
          v-else
          v-model="todo.editText"
          @blur="finishEdit(index)"
          @keyup.enter="finishEdit(index)"
        >
        
        <!-- 状态标签 -->
        <span
          class="status-tag"
          :class="todo.isDone ? 'status-done' : 'status-pending'"
          v-html="todo.isDone ? '<b>已完成</b>' : '<b>未完成</b>'"
        ></span>
        
        <!-- 编辑按钮 -->
        <button 
          class="btn btn-edit" 
          @click="startEdit(index)"
          :disabled="todo.isEditing"
        >
          编辑
        </button>
      </li>
    </ul>
    
    <!-- 统计信息 -->
    <div class="stats">
      总数量：{{ todos.length }} | 已完成：{{ doneCount }} | 未完成：{{ pendingCount }}
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          newTodoText: '',
          addTip: '',
          selectedIds: [],
          todos: [
            { id: 1, text: '学习v-model', isDone: false, isEditing: false, editText: '' },
            { id: 2, text: '练习v-for', isDone: true, isEditing: false, editText: '' },
            { id: 3, text: '掌握v-bind', isDone: false, isEditing: false, editText: '' }
          ]
        };
      },
      computed: {
        doneCount() {
          return this.todos.filter(todo => todo.isDone).length;
        },
        pendingCount() {
          return this.todos.filter(todo => !todo.isDone).length;
        }
      },
      methods: {
        addTodo() {
          const text = this.newTodoText.trim();
          if (!text) {
            this.addTip = '请输入待办内容！';
            return;
          }
          
          this.todos.push({
            id: Date.now(),
            text,
            isDone: false,
            isEditing: false,
            editText: text
          });
          
          this.newTodoText = '';
          this.addTip = '';
        },
        toggleDone(index) {
          this.todos[index].isDone = !this.todos[index].isDone;
        },
        deleteBatch() {
          if (confirm(`确定删除选中的${this.selectedIds.length}项待办？`)) {
            this.todos = this.todos.filter(todo => !this.selectedIds.includes(todo.id));
            this.selectedIds = [];
          }
        },
        startEdit(index) {
          const todo = this.todos[index];
          todo.isEditing = true;
          todo.editText = todo.text;
          
          setTimeout(() => {
            document.querySelectorAll('.edit-input')[index].focus();
          }, 0);
        },
        finishEdit(index) {
          const todo = this.todos[index];
          const editText = todo.editText.trim();
          if (editText) todo.text = editText;
          todo.isEditing = false;
        }
      }
    });
  </script>
</body>
</html>